<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.areaHeight"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">数量设置</el-divider>
      </div>
      <el-form-item label="患者个数" class="replenish-shown">
        <el-input-number
          size="small"
          :min="4"
          :step="optionsInfo['step'] || 2"
          :max="optionsInfo['maxRow'] || 60"
          @change="handlePatientListTotal"
          v-model="optionsInfo['doctorListRow']"
        />
      </el-form-item>
      <el-form-item label="列表列" class="replenish-shown" v-if="false">
        <el-input-number
          :min="5"
          size="small"
          @change="handlePatientListTotal"
          v-model="optionsInfo['patientListCol']"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">切屏间隔</el-divider>
      </div>
      <el-form-item label="切屏状态">
        <el-switch v-model="optionsInfo['switchState']"/>
      </el-form-item>
      <el-form-item label="切屏间隔" v-if="optionsInfo['switchState']">
        <el-input-number
          :max="optionsInfo.frequencyApi"
          size="small"
          v-model="optionsInfo['switchTime']"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">接口设置</el-divider>
      </div>
      <el-form-item label="接口状态" class="replenish-shown">
        <el-switch v-model="optionsInfo['ApiState']"/>
      </el-form-item>
      <template v-if="optionsInfo['ApiState']">
        <el-form-item label="接口类型" class="replenish-shown">
          <el-select v-model="optionsInfo['ApiType']" placeholder="请选择" size="small">
            <el-option
              v-for="item in ApiTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接口地址" class="replenish-shown" v-if="optionsInfo['ApiType']===1">
          <el-input
            v-model="optionsInfo['ApiAddress']"
            size="small"
            placeholder="请输入内容"
          />
        </el-form-item>

        <el-form-item
          label="接口标识"
          v-if="optionsInfo['ApiType']===2"
          class="replenish-shown"
        >
          <el-input
            v-model="optionsInfo['ApiSign']"
            size="small"
            placeholder="请输入内容"
          />
        </el-form-item>

        <!--接口请求频次-->
        <el-form-item label="请求频次(s)" class="replenish-shown" v-if="!optionsInfo['backstageRefresh']">
          <el-input-number
            :min="5"
            size="small"
            v-model="optionsInfo['frequencyApi']"
          />
        </el-form-item>

        <!--是否开启无感刷新-->
        <el-form-item label="开启无感刷新" class="replenish-shown">
          <el-switch v-model="optionsInfo['backstageRefresh']"/>
        </el-form-item>

      </template>
    </div>

    <!--医生信息设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生信息设置</el-divider>
      </div>

      <el-form-item label="字体粗细" v-if="optionsInfo.doctorInfoFontWeight">
        <el-select v-model="optionsInfo['doctorInfoFontWeight']" placeholder="请选择">
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="医生姓名字号" v-if="fieldHas('workerNameFontSize')">
        <el-input-number
          :min="50"
          size="small"
          v-model="optionsInfo.workerNameFontSize"
          :disabled="!(optionsInfo.doctorInfoDefaultShowCol).includes('workerName')"
        />
      </el-form-item>

      <el-form-item label="医院职称字号" v-if="fieldHas('workerTitleFontSize')">
        <el-input-number
          :min="30"
          size="small"
          v-model="optionsInfo.workerTitleFontSize"
          :disabled="!(optionsInfo.doctorInfoDefaultShowCol).includes('workerTitle')"
        />
      </el-form-item>

    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生介绍</el-divider>
      </div>

      <el-form-item label="内容字号" v-if="fieldHas('doctorIntroduceContentFontSize')">
        <el-input-number
          :min="12"
          size="small"
          v-model="optionsInfo.doctorIntroduceContentFontSize"
        />
      </el-form-item>
    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";

export default {
  name: "publicDoctorSchedulingConfig-editor",

  componentName: "publicDoctorSchedulingConfig-editor",

  mixins: [],

  components: {roomNameKeyEditor, Draggable},

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      radio: 1,
      screenType: '',
      optionsInfo: Object(),
      constantDic: constantDic,
      ApiTypeOptions: [
        {
          value: 1,
          label: '接口地址'
        },
        {
          value: 2,
          label: '接口标识'
        }
      ],
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
    }
  },

  computed: {
    // 判断字段是否存在
    fieldHas() {
      return function (field) {
        return Reflect.has(this.optionsInfo, field)
      }
    },
  },

  methods: {
    // 改变可是和诊室
    handleChangeDept(event) {
      let val = this.$lodash.uniqBy(event);
      if (val?.length === 1) {
        Reflect.set((this.optionsInfo), 'deptNameFontSize', 150);
        Reflect.set((this.optionsInfo), 'roomNameFontSize', 150)
      } else {
        Reflect.set((this.optionsInfo), 'deptNameFontSize', 92);
        Reflect.set((this.optionsInfo), 'roomNameFontSize', 120)
      }
      Reflect.set(this.optionsInfo, 'defaultShowCol', val)
    },

    handlePatientListTotal(val) {
      let {doctorListRow, doctorListCol} = this.optionsInfo;
      Reflect.set((this.optionsInfo), 'doctorListTotal', (doctorListRow * doctorListCol));
    },

    // handleChangeSwitch(val){
    //   let {frequencyApi} = this.optionsInfo;
    //   if(frequencyApi>val){
    //     Reflect.set((this.optionsInfo),'switchTime',val);
    //   }else {
    //
    //   }
    // },
    //
    //
    // handleChangeFrequency(val){
    //   let {switchTime} = this.optionsInfo;
    //   if(switchTime>val){
    //
    //   }
    // }
  },

  watch: {
    optionModel: {
      handler: function (val) {
        let key = (val.config)
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style lang="scss" scoped>
//科室 诊室 号别
.dept-number-room-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 8px;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
